<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas width="500" height="300" id="canvas"></canvas>
    <!-- 300x150 类似图片 不要设置css 尺寸-->

    <script>
      let canvas = document.querySelector("#canvas");

      //   获取绘图上下文
      let context = canvas.getContext("2d");
      //   2d canvas 画图

      context.fillStyle = "red";
      context.fillRect(100, 100, 10, 50);
      //   默认 颜色 黑色

      context.fillStyle = "green";
      context.fillRect(200, 100, 10, 50);

      //   描边
      context.lineWidth = 10;

      context.strokeStyle = "blue";
      context.rect(300, 100, 20, 50);
      //   context.stroke();
      //   描边
      context.fill();

      //   圆弧
      //   context.arc(
      //     x,
      //     y,
      //     radius,
      //     (Math.PI / 180) * startAngle,
      //     (Math.PI / 180) * endAngle,
      //     anticlockwise
      //   );

      // 关闭路径
      context.closePath();

      //   重新开始一个路径
      context.beginPath();

      // xy 圆心坐标  radius 半径 起始弧度 终止弧度  是否逆时针
      //   context.arc(150, 150, 30, (Math.PI / 180) * 0, (Math.PI / 180) * 180);
      //   context.arc(150, 150, 30, 0, Math.PI);
      //   context.arc(150, 150, 30, 0, 0.5 * Math.PI);
      context.arc(150, 150, 30, 0, 0.5 * Math.PI, true);
      context.stroke();

      context.closePath();

      //

      //   圆弧
      //   context.arcTo(x1, y1, x2, y2, radius);

      context.beginPath();
      context.strokeStyle = "black";
      context.lineWidth = 5;
      context.moveTo(200, 20);
      context.arcTo(200, 130, 50, 20, 40);
      context.stroke();

      //   自由线段
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(100, 100);

      context.moveTo(100, 0);
      context.lineTo(0, 100);
      context.stroke();

      //   可以画很复杂的图或者线 删除（本质上只有一个dom节点）

      // canvas 特别适合 图像密集型 (粒子效果 复杂图表 echarts 游戏)
      // 物理引擎 游戏引擎 白鹭  cocos laybox
    </script>
  </body>
</html>
